<template>
<div class="container-editeCompony">
  <el-form ref="componyInformationForm" :model="componyInformationForm" label-width="100px" :rules="rules">
 <el-form-item label="公司名称" prop="name">
    <el-input v-model="componyInformationForm.name"></el-input>
  </el-form-item>
  <el-form-item label="地址" prop="address">
    <el-input v-model="componyInformationForm.address"></el-input>
  </el-form-item>
  <el-form-item label="电话" prop="phone">
    <el-input v-model="componyInformationForm.phone"></el-input>
  </el-form-item>
  <el-form-item label="公司许可证">
    <el-input v-model="componyInformationForm.license"></el-input>
  </el-form-item>
  <el-form-item prop="status" label="审核状态">
    <el-select v-model="componyInformationForm.status" placeholder="请选择状态">
    <el-option
      v-for="item in StatusList"
      :key="item.value"
      :label="item.name"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item label="公司简介" prop="introduction">
    <el-input
    type="textarea"
    :rows="3"
    placeholder="请输入内容"
    v-model="componyInformationForm.introduction">
    </el-input>
  </el-form-item>
   <el-form-item>
    <upload-image @updateCompanyImageUrl="getCompanyImageUrl"></upload-image>
  </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="onSubmitCompony">提交</el-button>
    <el-button @click="resetCompony">重置</el-button>
  </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  components: { uploadImage: () => import('../../../components/uploadImage.vue') },
  props: {
    editeOption: {
      type: Object,
      required: {}
    }
  },
  data () {
    const checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('公司名称不能为空'))
      }
      callback()
    }
    const checkAddress = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入正确地址'))
      }
      callback()
    }
    const CheckPhone = (rule, value, callback) => {
      if (!(/^1[3456789]\d{9}$/.test(value))) {
        return callback(new Error('电话号码不正确'))
      }
      callback()
    }
    const CheckIntroduction = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('公司介绍不能为空'))
      }
      callback()
    }
    const CheckStatus = (rule, value, callback) => {
      if (value === '激活') {
        this.componyInformationForm.status = 1
      } else if (value === '未激活') {
        this.componyInformationForm.status = 0
      } else if (value !== '0' && value !== '1' && value !== 0 && value !== 1) {
        return callback(new Error('状态为0或者1，0为未激活，1为激活'))
      }
      callback()
    }
    return {
      componyInformationForm: {
        id: null,
        phone: '',
        address: '',
        name: '',
        license: '',
        introduction: '',
        status: null,
        img: ''
      },
      componyFormData: {},
      StatusList: [
        { name: '激活', value: 1 },
        { name: '未激活', value: 0 }
      ],
      rules: {
        name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { validator: checkAddress, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: CheckPhone, trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入公司介绍', trigger: 'blur' },
          { validator: CheckIntroduction, trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入公司介绍', trigger: 'blur' },
          { validator: CheckStatus, trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getCompony()
  },
  watch: {
    editeOption: {
      handler: function (newVal) {
        this.componyFormData = newVal
        this.getCompony()
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    upDateParams: function () {
      return this.componyFormData
    }
  },
  methods: {
    // 加载父组件传递过来的数据
    getCompony () {
      this.componyInformationForm = this.upDateParams
    },
    onSubmitCompony () {
      this.$refs.componyInformationForm.validate(async valid => {
        if (valid) {
          const res = await this.$http({
            url: '/api/platApi/client/edit',
            method: 'post',
            data: this.componyInformationForm
          })
          if (res.status === 200 && res.data.code === 1) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
          // 通知父组件，关闭弹框
          this.$emit('closeEditeComponyDialog')
          // 清除表格中的所有数据
          this.$refs.componyInformationForm.resetFields()
          // Object.assign(this.componyInformationForm, this.$options.data().componyInformationForm)
        } else {
          return false
        }
      })
    },
    resetCompony () {
      this.$refs.componyInformationForm.resetFields()
      // Object.assign(this.componyInformationForm, this.$options.data().componyInformationForm)
    },
    getCompanyImageUrl (val) {
      this.componyInformationForm.img = val
    }
  }
}
</script>

<style scoped lang="less">
.el-form{
    margin: 0 6%;
    .el-button{
      margin-left: 10%;
    }
}
</style>
